<template>
    <div class="page-login" v-loading.fullscreen="loading">
        <div class="page-login__head">
            <div class="logo"></div>
        </div>
        <div class="page-login__body" @keyup.enter="submit()">
            <div class="banner"></div>
            <div class="content">
                <div class="row row--logo">
                    <div class="name"></div>
                    <div class="value">
                        <div class="tab" v-for="sms in [false, true]" :key="sms" :class="{ 'tab--active': sms === form.sms }" @click="action('sms')">{{ sms ? "手机号登录" : "工号登录" }}</div>
                    </div>
                </div>
                <div class="row row--input" v-if="!form.sms">
                    <div class="name">工号</div>
                    <div class="value">
                        <input class="input" ref="number" v-model="form.number" placeholder="请输入" :maxlength="20" :readonly="loading" @change="validate()" />
                    </div>
                </div>
                <div class="row row--input" v-if="!form.sms">
                    <div class="name">密码</div>
                    <div class="value">
                        <input class="input" type="text" v-model="form.password" placeholder="请输入" :maxlength="20" :readonly="loading" @change="validate()" v-if="passwordVisible" />
                        <input class="input" type="password" v-model="form.password" placeholder="请输入" :maxlength="20" :readonly="loading" @change="validate()" v-else />
                        <div class="visible" :class="{ 'visible--active': passwordVisible }" @click="action('password')"></div>
                    </div>
                </div>
                <div class="row row--input" v-if="form.sms">
                    <div class="name">手机号</div>
                    <div class="value">
                        <input class="input" ref="mobile" v-model="form.mobile" placeholder="请输入" :maxlength="20" :readonly="loading" @change="validate()" />
                    </div>
                </div>
                <div class="row row--input" v-if="form.sms">
                    <div class="name">动态验证码</div>
                    <div class="value">
                        <input class="input" v-model="form.mcode" placeholder="请输入" :maxlength="6" :readonly="loading" @change="validate()" />
                        <div class="button" :class="{ 'button--disabled': sending || form.mcodeTime > 0 }" @click="action('mcode')">{{ sending ? "正在发送..." : form.mcodeTime > 0 ? "重新发送(" + form.mcodeTime + ")" : "发送验证码" }}</div>
                    </div>
                </div>
                <div class="row row--buttons">
                    <div class="value">
                        <div class="button" @click="submit()">{{ logining ? "正在登录..." : "登 录" }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-login__foot">
            <span class="text">©</span>
            <a class="link" :href="env.projectOwnerLink" target="_blank">{{ env.projectOwnerName }}</a>
            <a class="link" href="https://beian.miit.gov.cn/" target="_blank">{{ env.projectOwnerICPNo }}</a>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { object, string, int, storage } from "../util";
    export default {
        name: "page-login",
        title: "登录",
        nodes: [],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            sending: false,
            logining: false,
            form: {
                sms: false,
                number: "",
                password: "",
                vcode: "",
                vcodeId: "",
                vcodeURL: "",
                mobile: "",
                mcode: "",
                mcodeTime: 0,
                mcodeTimer: null,
            },
            passwordVisible: false,
        }),
        methods: {
            reset(deep) {
                if (this.loading) return;
                let data = deep ? {} : object(storage([this.env.key, this.$options.name, "form"]));
                this.form = Object.assign(this.$options.data().form, data);
                this.validate();
                this.action("focus");
                this.action("vcode");
                this.action("start-mcode-timer");
            },
            validate(isShowError) {
                let form = this.form;
                let error = "";
                form.number = string(form.number).trim();
                error = error || (form.sms ? "" : form.number ? "" : "请输入工号！");
                form.password = string(form.password);
                error = error || (form.sms ? "" : form.password ? "" : "请输入密码！");
                form.mobile = string(form.mobile).trim();
                error = error || (form.sms ? form.mobile ? "" : "请输入手机号！" : "");
                error = error || (form.sms ? /^1[3-9]\d{9}$/.test(form.mobile) ? "" : "手机号格式错误！" : "");
                form.mcode = string(form.mcode).trim();
                error = error || (form.sms ? form.mcode ? "" : "请输入动态验证码！" : "");
                storage([this.env.key, this.$options.name, "form"], { sms: form.sms, number: form.number, mobile: form.mobile });
                if (isShowError) this.plugins.modal.toast(error, "error");
                return !error;
            },
            action(name, data) {
                if (this.loading) return;
                let form = this.form;
                if (name === "sms") {
                    form.sms = !form.sms;
                    this.validate();
                    this.action("focus");
                } else if (name === "focus") {
                    this.$nextTick(() => form.sms ? this.$refs.mobile.focus() : this.$refs.number.focus());
                } else if (name === "password") {
                    this.passwordVisible = !this.passwordVisible;
                } else if (name === "vcode") {

                } else if (name === "mcode") {
                    if (this.sending || form.timeToSendMCode > 0) return;
                    if (!form.mobile) return this.plugins.modal.toast("请先输入手机号！", "warning");
                    if (!/^1[3-9]\d{9}$/.test(form.mobile)) return this.plugins.modal.toast("手机号格式错误！", "error");
                    this.sending = true;
                    this.plugins.user.getMCode(form).then((res) => {
                        this.sending = false;
                        if (res.code === 0) {
                            form.mcode = "";
                            this.validate();
                            this.action("start-mcode-timer", true);
                        } else {
                            this.plugins.modal.toast("发送失败：" + res.msg, "error");
                        }
                    });
                } else if (name === "start-mcode-timer") {
                    let key = [this.env.key, "send-mcode-time"];
                    let handler = () => {
                        form.mcodeTime = Math.min(Math.ceil(Math.max(int(storage(key)) + 60 * 1000 - Date.now(), 0) / 1000), 60);
                        form.mcodeTimer = clearTimeout(form.mcodeTimer) || setTimeout(handler, 1000);
                    };
                    if (data) storage(key, Date.now()) + handler();
                    else handler();
                }
            },
            submit() {
                if (this.loading) return;
                if (!this.validate(true)) return;
                let form = this.form;
                this.loading = this.logining = true;
                this.plugins.user.login(form).then((res) => {
                    this.loading = this.logining = false;
                    localStorage.setItem("zh",form.number,)
                    if (res.code === 0) {
                        this.$router.replace(this.$route.query.to || "/home");
                    } else {
                        this.action("vcode");
                        this.plugins.modal.toast("登录失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.reset();
            },
        },
    };
</script>

<style lang="scss">
    .page-login {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        overflow: hidden;
    }

    .page-login__head {
        flex: 0 0 auto;
        height: 60px;
        background: url(../assets/img01.png) no-repeat center center/100% 100%;

        & > .logo {
            float: left;
            margin: 15px;
            width: 150px;
            height: 30px;
            background: url(../assets/logo-2x1.png) no-repeat left center/contain;
            cursor: pointer;
        }
    }

    .page-login__body {
        flex: 1 1 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: stretch;
        margin: 40px;

        & > .banner {
            flex: 1 1 0;
            max-width: 940px;
            background: url(../assets/img02.png) no-repeat center center/cover;
        }

        & > .content {
            flex: 0 0 auto;
            width: 420px;
            background-color: white;
            overflow-x: hidden;
            overflow-y: auto;

            & > .row {
                margin: 20px 30px;

                & > .name {
                    margin-bottom: 5px;
                    color: #333;
                    font-size: 16px;
                    line-height: 20px;
                }

                & > .value {
                    padding: 10px;
                    height: 20px;
                    color: black;
                    font-size: 16px;
                    line-height: 20px;
                }
            }

            & > .row--logo {
                margin-top: 30px;
                margin-bottom: 30px;

                & > .name {
                    margin: 0 auto 10px;
                    border-radius: 8px;
                    width: 80px;
                    height: 80px;
                    background: url(../assets/logo-2.png) no-repeat center center/cover;
                }

                & > .value {
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    height: auto;

                    & > .tab {
                        margin: 0 10px;
                        padding: 10px;
                        height: 20px;
                        color: #666;
                        font-size: 16px;
                        line-height: 20px;
                        user-select: none;
                        cursor: pointer;
                    }

                    & > .tab--active {
                        padding-bottom: 9px;
                        border-bottom: solid 1px #1677ff;
                        color: #1677ff;
                    }
                }
            }

            & > .row--input {
                & > .value {
                    padding: 0;
                    height: auto;

                    & > .input {
                        display: block;
                        border: solid 1px #ddd;
                        border-radius: 4px;
                        padding: 10px 13px;
                        width: calc(100% - 28px);
                        height: 18px;
                        color: black;
                        font-size: 14px;
                        line-height: 18px;

                        &:focus {
                            border-color: #1677ff;
                        }
                    }

                    & > .select {
                        display: block;
                    }

                    & > .vcode {
                        position: absolute;
                        top: 2px;
                        right: 2px;
                        border-radius: 2px;
                        width: 100px;
                        height: 36px;
                        cursor: pointer;
                    }

                    & > .button {
                        position: absolute;
                        top: 1px;
                        right: 1px;
                        padding: 10px;
                        height: 18px;
                        color: #1677ff;
                        font-size: 14px;
                        line-height: 18px;
                        user-select: none;
                        cursor: pointer;
                    }

                    & > .button--disabled {
                        color: #999;
                        cursor: not-allowed;
                    }

                    & > .visible {
                        position: absolute;
                        top: 1px;
                        right: 1px;
                        border: solid 8px transparent;
                        width: 22px;
                        height: 22px;
                        font-size: 0;
                        line-height: 0;
                        background: url() no-repeat center center/contain;
                        user-select: none;
                        cursor: pointer;
                    }

                    & > .visible--active {
                        background-image: url();
                    }
                }
            }

            & > .row--buttons {
                margin: 30px;

                & > .name {
                    display: none;
                }

                & > .value {
                    padding: 0;
                    height: auto;

                    & > .button {
                        margin-bottom: 10px;
                        border: solid 1px #1677ff;
                        border-radius: 6px;
                        padding: 11px;
                        height: 20px;
                        color: white;
                        font-size: 16px;
                        line-height: 20px;
                        text-align: center;
                        background-color: #1677ff;
                        user-select: none;
                        cursor: pointer;

                        &:active {
                            background-color: mix(#1677ff, black, 90%);
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }

                    & > .button--plain {
                        border-color: #ddd;
                        color: #333;
                        background-color: white;

                        &:active {
                            background-color: #f6f6f6;
                        }
                    }
                }
            }
        }
    }

    .page-login__foot {
        flex: 0 0 auto;
        margin: 0 40px 40px;
        color: #666;
        font-size: 14px;
        line-height: 18px;
        text-align: center;

        & > .text {
            margin-right: 0.5em;
        }

        & > .link {
            margin-right: 0.5em;
            color: inherit;
            text-decoration: none;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }
    }
</style>